<template>
    <div>

        {{ s }}

    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
interface AllType {
    // num: number,
    str: string,
    [propName: string]: unknown

}
export default defineComponent({

    props: ["num", "str", "arr", "obj", "a"],
    setup(props: AllType, ctx) {  //props: AllType  意思是props里所有属性，为unknown类型
        const n: number = props.num as number
        const s: string = props.str  //在AllType提前定义，就不用as断言
        return { s }
    }
})
</script>


<style scoped></style>


<!-- <template>
    <div>
        child
        <p>{{ num }}</p>
        <p>{{ str }}</p>
        <p>{{ arr }}</p>
        <p>{{ obj }}</p>
        <p>{{ a }}</p>
        

    </div>
</template>

<script setup lang="ts">
interface Test {        //第一种方法
    num: number,            
    str: string,
    arr: Array<number>,
    obj?: Object,
    a:number,
    // tel:number,
    [propName: string]: any
}
defineProps<Test>()

defineProps({        //第二种方法
    num: {
        type: Number,
        default: 0
    },
    str: {
        type: String,
        default: ""
    },
    arr: {
        type: Array,
        default: []
    },
    obj: {
        type: Object,
        default: {}
    },
    a: {
        type: Number
    },
    tel: {
        type: Number,
        default: 8
    }
})

</script>

<style scoped></style> -->

